<template>
<div id="synamic-params">
    <div class="btn-layout">
        <my-button
            :type="'add'"
            :disabled='isdisabled'
            link 
            :to="{
                name: 'addParamsOrAttr', 
                params: {cid, sel: 'many', path: 'add-params', crumb: '_添加参数'}
            }"
        >添加参数</my-button>
    </div>
    <div class="table-layout">
        <div class="table">
            <ul class="thead">
                <li 
                    v-for="item in theadList" 
                    :key="item"
                    class="th"
                >{{item}}</li>
            </ul>
            <ul v-if="!newbool" class="tbody">
                <li class="td-none">暂无数据</li>
            </ul>
            <ul v-else class="tbody">
                <li 
                    v-for="(item, index) in lists"
                    :key="item.attr_id"
                    class="tr"
                >
                    <ul class="td" :data-aid='item.attr_id'>
                        <li class="td-item" @click="handleClickOpenTree">&gt;</li>
                        <li class="td-item">{{index+1}}</li>
                        <li class="td-item">{{item.attr_name}}</li>
                        <li class="td-item">
                            <div class="btn-group">
                                <my-button 
                                    :type="'edit'"
                                    link
                                    :to="{
                                        name: 'addParamsOrAttr', 
                                        params: {
                                            cid: item.cat_id, 
                                            sel: item.attr_sel,
                                            path: 'edit-params-name',
                                            crumb: '_修改动态参数',
                                            edit: true,
                                            aid: item.attr_id, 
                                            poaName: item.attr_name
                                        }
                                    }"
                                >编辑</my-button>
                                <my-button 
                                    :type="'delete'" 
                                    @click.native="handleClickDeleteThisParams(item.attr_id, 'many')"
                                >删除</my-button>
                            </div>
                        </li>
                    </ul>
                    <ul 
                        v-if="item.attr_vals==='ffff'"
                        v-show="openAttr===item.attr_id" 
                        class="tag-group"
                    >
                        <li>暂无数据</li>
                        <li 
                            v-if="!item.isShowInp"
                            class="tag" 
                            @click='handleClickAddTags(item.attr_id)'
                        >+ New Tag</li>
                        <input 
                            v-else 
                            type="text" 
                            class="tag-inp" 
                            ref='inp' 
                            v-model="inpValue" 
                            @change="handleTurnTag(item.attr_id)" 
                            @blur="handleTurnTag(item.attr_id)" 
                        >
                    </ul>
                    <ul 
                        v-else
                        v-show="openAttr===item.attr_id" 
                        class="tag-group"
                        @click="handleClickDeleteThisTags($event, item.attr_id)"
                    >
                        <li 
                            v-for="tags in item.attr_vals.split(',')" 
                            :key="tags"
                            class="tag" 
                            :data-tags='tags'
                        >{{tags}}</li>
                        <li
                            v-if="!item.isShowInp" 
                            class="tag" 
                            data-no-delete='1' 
                            @click='handleClickAddTags(item.attr_id)'
                        >+ New Tag</li>
                        <input 
                            v-else 
                            type="text" 
                            class="tag-inp" 
                            ref='inp' 
                            v-model="inpValue" 
                            @change="handleTurnTag(item.attr_id)" 
                            @blur="handleTurnTag(item.attr_id)" 
                        >
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import { 
    addCateTags, 
    deleteCateTags,
    deleteCateParamsOrAttr 
} from '../../config/data';
export default {
    name: 'dynamicParams',
    props: {
        isdisabled: {
            required: true,
            type: Boolean,
            default: true
        },
        list: {
            required: true,
            type: Array,
            default: []
        },
        cid: {
            required: true,
            type: String,
            default: ''
        }
    },
    data() {
        return {
            bool: false,
            openAttr: -1,
            inpValue: ''
        }
    },
    methods: {
        async handleTurnTag(aid) {
            if(this.inpValue.trim().length === 0) {
                this.handleInp(aid)
                return;
            }
            let result = await addCateTags({aid, tagName: this.inpValue})
            if(!result.fsBool) return;
            this.lists = result.data.list
        },
        handleClickAddTags(aid) {
            this.handleInp(aid)
            this.$nextTick(() => {
                this.$refs.inp && this.$refs.inp[0].focus()
            })
        },
        handleInp(aid) {
            this.lists = this.lists.map(item => {
                if(item.attr_id === aid) {
                    item.isShowInp = !item.isShowInp
                }
                return item;
            })
            this.inpValue = ''
        },
        async handleClickDeleteThisTags(e, aid) {
            if(
                e.target.constructor === HTMLUListElement
                || (e.target.dataset && e.target.dataset.noDelete === '1')
                || e.target.constructor === HTMLInputElement
            ) return;
            let flag = window.confirm('确定删除？')
            if(!flag) return;
            let result = await deleteCateTags({aid, tagName: e.target.dataset.tags})
            if(!result.fsBool) return;
            this.lists = result.data.list
        },
        async handleClickDeleteThisParams(aid, sel) {
            const flag = window.confirm('是否确定删除')
            if(!flag) return;
            let result = await deleteCateParamsOrAttr({cid: this.cid, aid, sel})
            if(!result.fsBool) return;
            this.$emit('update:list', result.data.list)
        },
        handleClickOpenTree(e) {
            const aid = Number(e.target.parentNode.dataset.aid)
            if(aid === this.openAttr) {
                this.openAttr = -1
                this.lists = this.lists.map(l => {
                    l.isShowInp = false
                    return l;
                })
                return;
            }
            this.lists = this.lists.map(l => {
                l.isShowInp = false
                return l;
            })
            this.openAttr = aid
        }
    },
    computed: {
        theadList() {
            return [' ', '#', '参数名称', '操作'];
        },
        newbool() {
            this.bool = this.list.length > 0 ? true : false;
            return this.bool;
        },
        lists: {
            get() {
                return this.list;
            },
            set(val) {
                val = val.filter(item => item.attr_sel === 'many')
                this.$emit('update:list', val)
            }
        }
    }
}
</script>

<style scoped>
#synamic-params {
    height: 100%;
}
.btn-layout {
    display: flex;
    align-items: center;
    height: 50px;
}
.table-layout {
    overflow-y: scroll;
    height: calc(100% - 50px);
}
.table-layout::-webkit-scrollbar {
    display: none;
}
.table {
    border: 1px solid #cecece;
}
.thead {
    display: flex;
}
.th {
    width: 100%;
    height: 42px;
    text-align: center;
    line-height: 42px;
    border-left: 1px solid #cecece;
    box-sizing: border-box;
}
.td-none {
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-top: 1px solid #cecece;
}
.tr {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #cecece;
}
.td {
    display: flex;
}
.td-item {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0 6px;
    border-left: 1px solid #cecece;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.th:nth-of-type(1), 
.th:nth-of-type(2), 
.td-item:nth-of-type(1),
.td-item:nth-of-type(2) {
    min-width: 64px;
    max-width: 64px;
    width: 64px;
}
.th:nth-of-type(1), 
.td-item:nth-of-type(1) {
    border-left: none;
}
.td-item:nth-of-type(1) {
    cursor: pointer;
    transition: background-color 0.32s;
}
.td-item:nth-of-type(1):hover {
    background-color: #ececec;
}
.th:nth-of-type(4), 
.td-item:nth-of-type(4) {
    min-width: 140px;
    max-width: 240px;
}
.btn-group {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.tag-group {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 64px;
    line-height: 64px;
    padding: 0 12px;
    border-top: 1px solid #cecece;
    white-space: nowrap;
    box-sizing: border-box;
}
.tag {
    height: 32px;
    line-height: 32px;
    margin: 6px;
    padding: 0 6px;
    background-color: rgba(179, 71, 241, 0.4);
    transition: background-color 0.32s;
    box-sizing: border-box;
    cursor: pointer;
}
.tag:hover {
    background-color: rgba(179, 71, 241, 0.6);
}
.tag-inp {
    max-width: 100px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
}
</style>